<template>
  <div class="stats-container">
    <div v-if="chooseStock || chooseUse" class="stock-shade"></div>
    <div v-if="chooseStock" class="stock-shade stock-shade1"></div>
    <div class="store-time stats-form">
      <div class="stats-form-group" v-if="stockStats && type === 'spare-parts-statistics'">
        <select @change="chooseCategoryStock" v-model="categoryStockId" :disabled="chooseStock">
          <option value="">{{$t('report.part.title37')}}</option>
          <option v-for="stock in partStock" :key="stock.id" :value="stock.id">{{stock.name}}</option>
        </select>
      </div>
      <div class="stats-form-group">
        <!-- <div class="stats-form-daterange" id="stock-date-range">
          <span>{{categoryStartTime}} - {{categoryEndTime}}</span> 
          <b class="caret"></b>
        </div> -->
        <date-picker @datePicker="datePicker" />
      </div>
    </div>
    <stats-part-stock @disable="isChoose" ref="stats1"
                      v-if="stockStats && init && type === 'spare-parts-statistics'" 
                      :source="isStock ? 1 : 0" 
                      :category-stock-id="categoryStockId" 
                      :category-start-time="categoryStartTime" 
                      :category-end-time="categoryEndTime"
                      @trackEvent="spsTrackEventHandler"
                      :auths="auths"
                      :chart-type="type"
                    ></stats-part-stock>
    <stats-part-use @disable="isChoose1" ref="stats2"
                    v-if="useStats && init && type === 'spare-parts-use'" 
                    :category-start-time="categoryStartTime" 
                    :category-end-time="categoryEndTime"
                    @trackEvent="spuTrackEventHandler"
                    :auths="auths"
                    :chart-type="type"
                    ></stats-part-use>
  </div>
</template>

<script>
/* global AMap, moment, _init_data*/
import qs from 'src/util/querystring';
import AuthUtil from '@src/util/auth';
import StatsPartStock from './StatsPartStock.vue'
import StatsPartUse from './StatsPartUse.vue'

export default {
  name: 'part-view',
  data(){
    return {
      init:false,
      auths: {},
      partStock:[],
      // teams: [],
      categoryStartTime: '', // 开始时间
      categoryEndTime: '', // 结束时间
      categoryStockId: '', // 选中的仓库ID   
      isStock:false, // 是否从备件仓库打开
      chooseStock:false, // 仓库统计是否正在进行柱状图加载
      chooseUse:false, // 备件使用统计是否正在进行中
      type: '' // 判断入口
    }
  },
  computed: {
    report(){
      return AuthUtil.hasAuth(this.auths, 'VIP_REPORT_VIEW');
    },
    // 运营分析是否有全部权限
    isAll(){     
      return this.auths['VIP_REPORT_VIEW'] == 3; 
    },
    stockStats() { // 仓库统计---（运营分析权限 && 运营分析全部权限）|| 从备件仓库打开时
      return (this.report && this.isAll) || this.isStock
    },
    useStats() { // 备件使用统计--- 运营分析权限 && 只能从运营分析板块打开
      return this.report && !this.isStock
    }
  },
  methods: {
    isChoose(flag){
      this.chooseStock = flag;
    },
    isChoose1(flag){
      this.chooseUse = flag;
    },
    chooseCategoryStock(){ // 选择备件库
      this.$tdOnEvent('pc：备件报表-仓库筛选下拉框事件');

      this.categoryStockId = event.target.value;
      if(this.stockStats) this.$nextTick(() => this.$refs.stats1.initModel());
    },
    chooseCategoryDate(start, end){ // 选择时间
      this.$tdOnEvent('pc：备件报表-日期选择事件');

      this.categoryStartTime = start;
      this.categoryEndTime = end;
      if(this.stockStats && this.init) this.$nextTick(() => this.$refs.stats1.initModel());
      if(this.useStats && this.init) this.$nextTick(() => this.$refs.stats2.initModel());
    },
    // stats-part-stock TalkingData事件埋点
    spsTrackEventHandler (type) {
      switch (type) {
      case this.$t('report.part.title12'):
        this.$tdOnEvent('pc：备件报表-在库品类事件');
        break;
      case this.$t('report.part.title17'):
        this.$tdOnEvent('pc：备件报表-备件总数事件');
        break;
      case this.$t('report.part.title21'):
        this.$tdOnEvent('pc：备件报表-出库数量事件');
        break;
      case this.$t('report.part.title24'):
        this.$tdOnEvent('pc：备件报表-缺件品类事件');
        break;
      case 'outStoreSingle':
        this.$tdOnEvent('pc：备件报表-备件出库-单品事件');
        break;
      case 'inStoreSingle':
        this.$tdOnEvent('pc：备件报表-备件入库-单品事件');
        break;
      case 'inRepertorySingle':
        this.$tdOnEvent('pc：备件报表-备件在库-单品事件');
        break;
      case 'inRepertoryPrice':
        this.$tdOnEvent('pc：备件报表-备件在库-金额事件');
        break;
      default:
        break;
      }
    },
    // stats-part-use TalkingData事件埋点
    spuTrackEventHandler (type) {
      switch (type) {
      case 'chooseTeam':
        this.$tdOnEvent('pc：备件报表-选择团队事件');
        break;
      case 'applyType':
        this.$tdOnEvent('pc：备件报表-备件使用-类别事件');
        break;
      case 'applySingle':
        this.$tdOnEvent('pc：备件报表-备件使用-数量事件');
        break;
      case 'personalNum':
        this.$tdOnEvent('pc：备件报表-个人备件库-数量事件');
        break;
      case 'personalPrice':
        this.$tdOnEvent('pc：备件报表-个人备件库-金额事件');
        break;
      default:
        break;                              
      }
    },
    datePicker(data) {
      this.type = window.location.href.split('type=')[1]
      let start = data[0];
      let end = data[1];   
      this.categoryStartTime = start;
      this.categoryEndTime = end;    
      this.chooseCategoryDate(start, end)

      this.type && this.$track.commonFn.chartTrack(this.type, 'REPORT_SEARCH_TIME', this.$track)
    }
  },
  mounted(){
    let initData = JSON.parse(sessionStorage.getItem('_init_data'))
    // 是否从备件仓库打开
    let urlParams = qs.parse(window.location.search);
    if(urlParams.source == 1){ 
      document.title = this.$t('common.pageTitle.pageStatsPart');
      this.categoryStockId = urlParams.id;
      this.isStock = true;
    } else {
      this.isStock = false;
      this.auths = initData.auths || {};
      if(!this.report) return window.location.href = '/403';
    }
     
    // this.teams = initData.teams || [];
    this.partStock = initData?.part || [];
    
    // 初始化时间控件
    this.init = true;
  },
  components: {
    StatsPartStock,
    StatsPartUse
  }
}
</script>

<style lang="scss">
.store-time{
  display: flex;
  flex-flow: row nowrap;
  margin:7.5px 7.5px 15px 0;
  justify-content: flex-end;
}
.stock-shade{
  position: absolute;
  width:200px;
  height:26px;
  top:15px;
  right:15px;
  background:rgba(255,255,255,.5);
}
.stock-shade1{
  right:224px;
}
</style>
